<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<link rel="shortcut icon" type="image/x-icon" th:href="@{/img/center.png}">
	<meta charset="UTF-8">
	<title>用户个人中心</title>
	<link rel="stylesheet" type="text/css" th:href="@{/css/head.css}" href="css/head.css" />
	<link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}"  href="css/reset.css"/>
	<link rel="stylesheet" type="text/css" th:href="@{/css/footer.css}" href="css/footer.css"/>
	<link rel="stylesheet" th:href="@{/administration/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/css/personal-center.css}" href="css/personal-center.css" />
	<script th:src="@{/js/jquery-3.3.1.min.js}" src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/administration/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
	<script th:src="@{/layer-v3.1.1/layer/layer.js}" src="layer-v3.1.1/layer/layer.js"></script>
</head>

<body>
<div th:insert="head::topbar"></div>
<div class="personal-bg">
	<div class="container clearfix">
		<div class="personal-tit">
			<a href="/customer/person_center">首页</a>
			<span class="icon-righthollo"></span>
			<span>个人中心</span>
		</div>
		<!--左边复选框↓-->
		<div class="personal-leftlist fl">
			<div class="personal-sideitem">
				<div class="personal-headtxt">账号管理</div>
				<ul>
					<li>
						<a href="#" class="active">个人中心</a>
					</li>
					<li>
						<a href="#">消息通知</a>
					</li>
					<li>
						<a th:href="@{/customer/accountInformation(customerId=${session.customerId})}">账号中心</a>
					</li>
					<li>
						<a th:href="@{/customer/addressManage(customerId=${session.customerId})}">地址管理</a>
					</li>
					<li>
						<a href="#">账号安全</a>
					</li>
					<li>
						<a href="#">我的积分</a>
					</li>
					<li>
						<a href="#">我的收藏</a>
					</li>
					<li>
						<a href="#">我的足迹</a>
					</li>
					<li>
						<a href="#">我的甄选家</a>
					</li>
				</ul>
			</div>
			<div class="personal-sideitem">
				<div class="personal-headtxt">交易管理</div>
				<ul>
					<li>
						<a href="#">订单管理</a>
					</li>
					<li>
						<a href="#">我的红包</a>
					</li>
					<li>
						<a href="#">优惠券</a>
					</li>
					<li>
						<a href="#">礼品卡</a>
					</li>
					<li>
						<a href="#">优先购</a>
					</li>
					<li>
						<a href="#">我的众筹</a>
					</li>
				</ul>
			</div>
			<div class="personal-sideitem">
				<div class="personal-headtxt">服务中心</div>
				<ul>
					<li>
						<a href="#">售后记录</a>
					</li>
					<li>
						<a href="#">价格保护</a>
					</li>
					<li>
						<a href="#">帮助中心</a>
					</li>
				</ul>
			</div>
		</div>
		<!--左边复选框↑-->
		<div class="personal-rightlist fl">
			<div class="personal-userInfo clearfix">
				<div class="personal-userInfo-l fl">
					<div class="personal-infowrap">
						<a href="#">
							<img th:src="@{/img/personal-headportrait.jpg}" alt="" />
						</a>
						<div class="personal-name">
							<div class="nick-name" th:text="${session.customerId}"></div>
						</div>
					</div>
					<div class="personal-infogrow">
						<div class="personal-grownum clearfix">
									<span class="fl">
										<a href="#">成长值 >></a>
									</span>
							<span class="fr">
										<span>0</span>
									<span>/</span>
									<span>1</span>
									</span>
						</div>
						<!--								<div class="personal-process">-->
						<!--									<div class="personal-num"></div>-->
						<!--								</div>-->
						<div class="progress">
							<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
								60%
							</div>
						</div>
					</div>
				</div>
				<div class="personal-userInfo-r fl clearfix">
					<!--                            修改处-->
					<!-- Button trigger modal -->
					<div class="col-md-10">
						<div class="personal-userInfo-r-item fl clearfix">
							<div class="personal-label fl">
								我的红包
							</div>
							<div class="personal-content fl">
								<a href="#">
									<span>¥</span>
									<span>0.00</span>
								</a>
							</div>
						</div>
						<div class="personal-userInfo-r-item fl clearfix">
							<div class="personal-label fl">
								优惠券
							</div>
							<div class="personal-content fl">
								<a href="#">
									<span>0</span>
									<span>张</span>
								</a>
							</div>
						</div>
						<div class="personal-userInfo-r-item fl clearfix">
							<div class="personal-label fl">
								可兑返利
							</div>
							<div class="personal-content fl">
								<a href="#">
									<span>¥</span>
									<span>0.00</span>
								</a>
							</div>
						</div>
						<div class="personal-userInfo-r-item fl clearfix">
							<div class="personal-label fl">
								礼品卡
							</div>
							<div class="personal-content fl clearfix">
								<a href="#" class="lipin-b fl">
									<span>¥</span>
									<span>0.00</span>
								</a>
								<i class="icon-kaiyan fl"></i>
								<a href="#" class="lipin-n fl">
									****
								</a>
								<i class="icon-biyan fl"></i>
							</div>
						</div>
						<div class="personal-userInfo-r-item fl clearfix">
							<div class="personal-label fl">
								我的积分
							</div>
							<div class="personal-content fl">
								<a href="#">
									<span>0</span>
								</a>
							</div>
						</div>
						<div class="personal-userInfo-r-item fl clearfix">
							<div class="personal-label fl">
								待领礼包
							</div>
							<div class="personal-content fl">
								<a href="#">
									<span>0</span>
									<span>个</span>
								</a>
							</div>
						</div>
					</div>
					<div class="col-md-2">
						<button style="background-color:#b4a078;border:none; margin-left: -60px;margin-top:57px" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
							完善个人信息
						</button>
					</div>

					<!-- Modal -->
					<div  class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
						<div class="modal-dialog" role="document">
							<div class="modal-content" style="width: 1000px;margin-left:-200px;margin-top: 150px;">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
									<h4 class="modal-title" style="text-align: center">完善信息</h4>
								</div>
								<div class="modal-body">
									<form class="form-horizontal" action="/customer/complete1" method="post">
										<div class="row">
											<div class="col-md-6">
												<input type="hidden" th:value="${session.customerId}" name="customerId"/>
												<h4 class="modal-title" style="text-align: center">个人信息</h4>
												<div class="form-group">
													<label for="inputEmail3" class="col-sm-3 control-label">用户姓名</label>
													<div class="col-sm-9">
														<input type="text" name="customerName" th:value="${customer} == null?'':${customer.customerName}" class="form-control" id="inputEmail3" placeholder="用户姓名">
													</div>
												</div>
												<div class="form-group">
													<label  class="col-sm-3 control-label">用户银行卡号</label>
													<div class="col-sm-9">
														<input type="number" name="customerBank" th:value="${customer} == null?'':${customer.customerBank}" class="form-control" id="inputPassword3" placeholder="用户银行卡号">
													</div>
												</div>
												<div class="form-group">
													<label  class="col-sm-3 control-label">用户收货地址</label>
													<div class="col-sm-9">
														<input type="text" class="form-control"  name="customerAddress" placeholder="用户收货地址" th:if="${address} == null">
														<input type="text" th:if="${address}!=null" class="form-control"  th:value="${address}" name="customerAddress" placeholder="用户收货地址">
													</div>
												</div>
											</div>
											<div class="col-md-6">
												<h4 class="modal-title" id="myModalLabel" style="text-align: center">账号信息</h4>
												<div class="form-group">
													<label  class="col-sm-3 control-label">用户昵称</label>
													<div class="col-sm-9">
														<input type="text" name="customerNickname" th:value="${customer} == null?'':${customer.customerNickname}" class="form-control"  placeholder="用户昵称">
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-3 control-label">用户手机</label>
													<div class="col-sm-9">
														<input type="text" name="customerPhone" class="form-control"  placeholder="用户手机" th:if="${customer.customerPhone}==null">
														<input type="text" name="customerPhone" disabled="disabled" th:value="${customer.customerPhone}" class="form-control"  placeholder="用户手机" th:if="${customer.customerPhone}!=null">
													</div>
												</div>
												<div class="form-group">
													<label  class="col-sm-3 control-label">用户邮箱</label>
													<div class="col-sm-9">
														<input type="email" name="customerEmail"  class="form-control" placeholder="用户邮箱" th:if="${customer.customerEmail}==null">
														<input type="email" name="customerEmail" disabled="disabled" th:value="${customer.customerEmail}" class="form-control" placeholder="用户邮箱" th:if="${customer.customerEmail}!=null">
													</div>
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-md-6">
												<div class="form-group">
													<div class="col-sm-offset-2 col-sm-9 text-center">
														<button type="submit" style="background-color: #b4a078;" class="btn btn-primary">提交</button>
													</div>
												</div>
											</div>
											<div class="col-md-6">
												<div class="form-group">
													<div class="col-sm-offset-2 col-sm-9 text-center">
														<button type="button" style="background-color: #b4a078;" class="btn btn-danger" data-dismiss="modal">取消</button>
													</div>
												</div>
											</div>
										</div>

									</form>
									<!--											<div class="modal-footer">-->
									<!--												<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
									<!--												<input style="background-color: #b4a078; border: none" type="submit" class="btn btn-primary" value="完善信息">-->
									<!--												&lt;!&ndash;													<button type="button" class="btn btn-primary">Save changes</button>&ndash;&gt;-->
									<!--											</div>-->
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
			<div class="personal-vip relative">
				<div class="icon-erwei absolute">
					<img th:src="@{/img/personal-erwei.png}" />
				</div>
				<div class="personal-vipbook">
					<div class="personal-line">开通网易严选超级会员&nbsp;尊享8大专属特权</div>
					<div class="personal-line">限时30天免费体验</div>
					<div class="personal-line">(¥149开通超级会员平均一年可省2034元)</div>
				</div>
			</div>
			<div class="personal-undone">
				<div class="undone-hd">
					<h3 class="clearfix">
						<span>未完成订单</span>
					</h3>
				</div>

				<div class="undone-hb">
					<table id="indentTable" border="0" cellspacing="" cellpadding="">
						<thead></thead>
						<tbody>
						<div th:each="indent : ${session.indentsIdentifyZero}">
							<tr id="indentTrs">
								<td class="undone-col1 clearfix">
									<input type="hidden" th:value="${indent.getIndentId()}">
									<div class="picList fl clearfix">
										<a th:href="@{/indent/indentDetails(indentId=${indent.getIndentId()})}" id="indentHistory">
											<img th:src="@{/img/timg.jpg}"/>
										</a>
										<button></button>
									</div>
									<div class="express fl">
										<div class="cell">
											<span >包裹</span>
											<span st th:text="${indent.getIndentId()}"></span>
										</div>
									</div>
									<div class="status fl">
										<div class="cell">
											<span style="color: #f33;">待付款</span>
										</div>
									</div>
								</td>
								<td class="undone-col2">
									<span>¥</span>
									<span th:text="${indent.indentPrice}"></span>
								</td>
								<td class="undone-col3">
									<div class="payfor">
										<div style="margin-bottom: 4px;">

											<button class="btn btn-danger" style="width: 82px;"><a style="color: #ffffff" th:href="@{/shoppingcart/goPay(indentId = ${indent.getIndentId()})}"><span style="padding-right: 5px;">去付款</span></a></button>
										</div>
										<!--												<div>-->
										<!--													<a href="#">查看详情</a>-->
										<!--												</div>-->
										<div >
											<button id="cancelBtn" class="btn btn-danger">取消订单</button>
											<!--													<a href="#" class="nopay">取消订单</a>-->
										</div>
									</div>
								</td>
							</tr>
						</div>
						</tbody>
					</table>
				</div>
			</div>
			<div class="personal-undone">
				<div class="undone-hd">
					<h3 class="clearfix">
						<span>已完成订单</span>
						<!--								<a href="order-list.html">查看全部订单</a>-->
					</h3>
				</div>

				<div class="undone-hb">
					<table border="0" cellspacing="" cellpadding="">
						<thead></thead>
						<tbody>
						<div th:each="indent : ${session.indentsIdentifyOne}">
							<tr >
								<td class="undone-col1 clearfix">
									<div class="picList fl clearfix">
										<a th:href="@{/indent/indentDetails(indentId=${indent.getIndentId()})}">
											<img th:src="@{/img/undonepro1.png}"/>
										</a>
									</div>
									<div class="express fl">
										<div class="cell">
											<span>包裹</span>
											<span st th:text="${indent.getIndentId()}"></span>
										</div>
									</div>
									<div class="status fl">
										<div class="cell">
											<span style="color:lightsteelblue;">已付款</span>
										</div>
									</div>
								</td>
								<td class="undone-col2">
									<span>¥</span>
									<span th:text="${indent.indentPrice}"></span>
								</td>
								<td class="undone-col3">
									<div class="payfor">
										<div style="margin-bottom: 4px;">
											<div style="background-color: gray" class="payfora relative">
												<span style="padding-right: 5px;">已付款</span>
												<div class="payforahover absolute"></div>
											</div>
										</div>
										<div>
											<a href="#">查看详情</a>
										</div>
										<!--												<div>-->
										<!--													<a href="#" class="nopay">取消订单</a>-->
										<!--												</div>-->
									</div>
								</td>

							</tr>
						</div>


						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<div th:replace="footer::#footbar"></div>
<script type="text/javascript">

	$('#test').click(function () {
		console.log($("#indentTable").find('tr'))
	})
	$("#indentTable").find('tr').each(function () {
		//需删除的id值
		var val = $(this).find('input').val();
		$(this).find('#cancelBtn').click(function () {

			var tr = $(this).parents('#indentTrs');
			//alert(cartId)
			layer.confirm('确定删除吗？', function (index) {
				$.ajax({
					url: "/indent/indentDelete?indentId="+val,
					method: 'GET',
					traditional: true,
					success: function (json) {
						layer.msg('已删除');
						tr.remove();
					}
				});
			});
		})

	})
</script>

<script type="text/javascript">
	$(document).ready(function() {
		//点击开眼隐藏礼品卡信息，点击闭眼显示礼品卡信息
		$(".icon-kaiyan").click(function() {
			$(this).siblings(".lipin-b").css("display", "none");
			$(this).siblings(".lipin-n").css("display", "block");
			$(this).css("display", "none");
			$(this).siblings(".icon-biyan").css("display", "block");
		});
		$(".icon-biyan").click(function() {
			$(this).siblings(".lipin-n").css("display", "none");
			$(this).siblings(".lipin-b").css("display", "block");
			$(this).css("display", "none");
			$(this).siblings(".icon-kaiyan").css("display", "block");
		});
		//去付款
		$(".payfora").click(function () {
			$(location).attr("href","shopping-pay.html");
		});
		//取消
		$(".nopay").click(function () {
			$(this).parents("tr").remove();
		});
	});
	$(function () {
		$("[data-toggle='popover']").popover();
	});
</script>
</body>

</html>